<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>shopping-购物网站</title>
    <meta name="description" content="shopping-购物网站" />
    <meta name="keywords" content="网上购物，网上商城，手机笔记本，相机" />

    <!--引入网页标签图标-->
    <link rel="shortcut icon" href="favicon.ico" />
    <!--引入css统一化文件-->
    <link rel="stylesheet" href="./css/base.css" />
    <!--引入共同的样式文件-->
    <link rel="stylesheet" href="./css/common.css" />
    <!--引入main的样式文件-->
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!--顶部快捷导航栏开始-->
    <section class="shortcut">
      <div class="heart">
        <!--快捷导航左侧部分-->
        <div class="fleft">
          <ul>
            <li>你好！</li>
            <li>
              <a href="#">请登录</a>
              <a href="#" class="style_red">免费注册</a>
            </li>
          </ul>
        </div>
        <!--快捷导航右侧部分-->
        <div class="fright">
          <ul class="line">
            <li><a href="#">我的订单</a></li>
            <li></li>
            <li><a href="#">我的购物车</a></li>
            <li></li>
            <li><a href="#">我的服务</a><i class="iconfont">&#xe8d7;</i></li>
            <li></li>
            <li><a href="#">我的会员</a></li>
            <li></li>
            <li><a href="#">企业采购</a></li>
            <li></li>
            <li><a href="#">客户服务</a></li>
            <li></li>
            <li><a href="#">合作招商</a></li>
            <li></li>
            <li><a href="#">商家后台</a><i class="iconfont">&#xe8d7;</i></li>
          </ul>
        </div>
      </div>
    </section>
    <!--顶部快捷导航栏结束-->
    <!--头部模块开始-->
    <header class="header-bar heart">
      <!--logo模块开始-->
      <div class="logo">
        <h1>
          <a href="index.html" title="shopping">shoping首页</a>
        </h1>
      </div>
      <!--logo模块结束-->
      <!--搜索模块开始-->
      <div class="search">
        <input type="search" name="" id="" placeholder="请输入搜索内容" />
        <button>搜索</button>
      </div>
      <!--搜索模块结束-->
      <!--热点词模块开始-->
      <div class="hotwords">
        <a href="#" class="style_red">全民种植季</a>
        <a href="#">京东京造</a>
        <a href="#">邮币节 </a>
        <a href="#">Watch</a>
        <a href="#">新品上市</a>
        <a href="#">Neo6上市</a>
        <a href="#">低至5折 </a>
        <a href="#">智能手表</a>
      </div>
      <!--热点词模块结束-->
      <!--购物车模块开始-->
      <div class="shopcar">
        <i class="iconfont">&#xe61b;</i>
        <i class="count">0</i>
        <a href="#">我的购物车</a>
        <span class="iconfont">&#xe8d7;</span>
      </div>
      <!--购物车模块结束-->
    </header>
    <!--头部模块结束-->
    <!--导航模块开始-->
    <nav class="nav">
      <div class="heart">
        <!--全部分类菜单模块开始-->
        <div class="dropdown">
          <div class="dt">全部商品分类</div>
          <div class="dd">
            <ul>
              <li><a href="#">家用电器</a></li>
              <li>
                <a href="#">手机</a> / <a href="#">运营商</a> /
                <a href="#">数码</a>
              </li>
              <li><a href="#">电脑</a> / <a href="#">办公</a></li>
              <li>
                <a href="#">家居</a> / <a href="#">家具</a> /
                <a href="#">厨具</a>
              </li>
              <li>
                <a href="#">男装</a> / <a href="#">女装</a> / 
                <a href="#">童装</a></a>
              </li>
              <li>
                <a href="#">女鞋</a> / <a href="#">箱包</a> / 
                <a href="#">钟表</a> / <a href="#">珠宝</a>
              </li>
              <li>
                <a href="#"> 男鞋</a> / <a href="#">运动</a> / 
                <a href="#">户外</a>
              </li>
              <li>
                <a href="#">房产</a>
              </li>
              <li>
                <a href="#">食品</a> / <a href="#">酒类</a> 
              </li>
              <li>
                <a href="#">艺术</a> / <a href="#">礼品鲜花</a>
              </li>
              <li>
                <a href="#">医药保健</a>
              </li>
              <li>
                <a href="#">图书</a> / <a href="#">文娱</a> / 
                 <a href="#">教育</a> / <a href="#">电子书</a>
              </li>
              <li>
                <a href="#">机票</a> / <a href="#">酒店</a>
              </li>
              <li>
                <a href="#">理财</a> / <a href="#">众筹</a>
              </li>
              <li>
                <a href="#">安装</a> / <a href="#">维修</a> / 
                <a href="#">搬家</a>
              </li>
            </ul>
          </div>
        </div>
        <!--全部分类菜单模块结束-->
        <!--导航各个项目开始-->
        <div class="navitems">
          <ul>
            <li><a href="#">限时秒杀</a></li>
            <li><a href="#">优惠券</a></li>
            <li><a href="#">服装城</a></li>
            <li><a href="#">品牌闪购</a></li>
            <li><a href="#">拍卖</a></li>
            <li><a href="#">京东家电</a></li>
            <li><a href="#">京东超市</a></li>
            <li><a href="#">全球购</a></li>
          </ul>
        </div>
        <!--导航各个项目结束-->
      </div>
    </nav>
    <!--导航模块结束-->

<!-----------首页轮播图部分开始------------->
    <div class="heart">
      <div class="main">
        <!--焦点图模块-->
        <div class="focus">
          <!--左按钮-->
          <button class="button button-prev">
            <i class="iconfont">&#xe8d0;</i>
          </button>
          <ul>
            <li>
              <a href="#"><img src="./upload/focus1.png" alt="图片加载失败"></a>
            </li>
          </ul>
          <!--右按钮-->
          <button class="button button-next">
            <i class="iconfont">&#xe8d2;</i>
          </button>
          <!--小圆点-->
          <ul class="doct">
            <li class="selected"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <!--快报模块-->
        <div class="newsflash">
          <div class="news">
            <div class="news-hd">
              <h5>京东快报</h5>
              <a href="#" class="more">更多</a>
            </div>
            <div class="news-bd">
              <ul>
                <li>
                    <a href="#">
                    <span class="news-tag">最新</span>
                    中华老字号同仁堂：“同修仁德，大人小孩都爱吃”
                    </a>
                </li>
                <li>
                  <a href="#">
                  <span class="news-tag">最新</span>
                  中华老字号同仁堂：“同修仁德，大人小孩都爱吃”
                  </a>
                </li>
                <li>
                  <a href="#">
                  <span class="news-tag">最新</span>
                  中华老字号同仁堂：“同修仁德，大人小孩都爱吃”
                  </a>
                </li>
                <li>
                  <a href="#">
                  <span class="news-tag">最新</span>
                  中华老字号同仁堂：“同修仁德，大人小孩都爱吃”
                  </a>
                </li>
                <li>
                  <a href="#">
                  <span class="news-tag">最新</span>
                  中华老字号同仁堂：“同修仁德，大人小孩都爱吃”
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="lifeservice">
            <ul>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
            </ul>
          </div>
          <div class="bargain">
            <a href="#"><img src="./upload/bargain.png" alt="图片加载失败"></a>
          </div>
        </div>
      </div>
    </div>
<!-----------首页轮播图结束------------->

<!-----------首页推荐部分开始------------->
    <div class="heart recom">
      <!--秒杀部分开始-->
      <div class="recom_hd">
        <div class="countdown-title">京东秒杀</div>
        <div class="countdown-desc"><strong>12:00</strong>点场距结束</div>
        <div class="countdown">
          <span class="timer hour">12</span>
          <span class="timer minute">53</span>
          <span class="timer second">32</span>
        </div>
      </div> 
      <!--秒杀部分结束-->
      <!--秒杀推荐开始-->
      <div class="recom_bd">
        <ul>
          <li><img src="./upload/seckill1.png" alt="图片加载失败"></li>
          <li><img src="./upload/seckill1.png" alt="图片加载失败"></li>
          <li><img src="./upload/seckill1.png" alt="图片加载失败"></li>
          <li><img src="./upload/seckill1.png" alt="图片加载失败"></li>
          <li><img src="./upload/seckill1.png" alt="图片加载失败"></li>
        </ul>
      </div>
      <!--秒杀推荐结束-->
    </div>
<!-----------首页推荐部分结束------------->
    <!-----------楼层区域部分开始------------->
    <div class="floor">
      <!--家电楼层-->
      <div class="heart electrical">
        <!--家电标题部分-->
        <div class="box_hd">
          <h3>家用电器</h3>
          <div class="tab_list">
            <ul class="line">
              <li><a href="#" class="style_red">精选</a></li>
              <li></li>
              <li><a href="#">猜你喜欢</a></li>
              <li></li>
              <li><a href="#">大家电</a></li>
              <li></li>
              <li><a href="#">厨房电器</a></li>
              <li></li>
              <li><a href="#">生活电器</a></li>
              <li></li>
              <li><a href="#">高端电器</a></li>
            </ul>
          </div>
        </div>
        <!--家电主题部分-->
        <div class="box_bd">
          <div class="tab_content">
            <div class="tab_list_item">
              <div class="col1">
                <a href="#"><img src="./upload/things1.png" alt="图片加载失败"></a>
              </div>
              <div class="col1">
                <a href="#"><img src="./upload/things2.png" alt="图片加载失败"></a>
              </div>
              <div class="col1">
                <div class="col2">
                  <a href="#" class="title">
                    <span class="maintitle">京东国际</span>
                    <span class="asidetitle">一站尽享进口好物</span>
                  </a>
                  <div class="little_things">
                    <a href="#"><img src="./upload/thing3.png" alt="图片加载失败"></a>
                    <a href="#"><img src="./upload/thing4.png" alt="图片加载失败"></a>
                  </div>
                </div>
                <div class="col2">
                  <a href="#" class="title">
                    <span class="maintitle">京东国际</span>
                    <span class="asidetitle">一站尽享进口好物</span>
                  </a>
                  <div class="little_things">
                    <a href="#"><img src="./upload/thing3.png" alt="图片加载失败"></a>
                    <a href="#"><img src="./upload/thing4.png" alt="图片加载失败"></a>
                  </div>
                </div>
              </div>
              <div class="col1">
                <div class="col2">
                  <a href="#" class="title">
                    <span class="maintitle">京东国际</span>
                    <span class="asidetitle">一站尽享进口好物</span>
                  </a>
                  <div class="little_things">
                    <a href="#"><img src="./upload/thing3.png" alt="图片加载失败"></a>
                    <a href="#"><img src="./upload/thing4.png" alt="图片加载失败"></a>
                  </div>
                </div>
                <div class="col2">
                  <a href="#" class="title">
                    <span class="maintitle">京东国际</span>
                    <span class="asidetitle">一站尽享进口好物</span>
                  </a>
                  <div class="little_things">
                    <a href="#"><img src="./upload/thing3.png" alt="图片加载失败"></a>
                    <a href="#"><img src="./upload/thing4.png" alt="图片加载失败"></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-----------楼层区域部分结束------------->

    <!-----------footer部分开始------------->
    <footer class="footer">
      <div class="heart">
        <!-----------footer上半部分开始------------->
        <div class="mod_service">
          <ul>
            <li>
              <h5></h5>
              <p>品类齐全，轻松购物</p>
            </li>
            <li>
              <h5></h5>
              <p>多仓直发，极速配送</p>
            </li>
            <li>
              <h5></h5>
              <p>正品行货，精致服务</p>
            </li>
            <li>
              <h5></h5>
              <p>天天低价，畅选无忧</p>
            </li>
          </ul>
        </div>
        <!-----------footer上半部分结束------------->
        <!-----------footer下半部分开始------------->
        <div class="mod_help">
          <div class="mod_help_nav">
            <h5>购物指南</h5>
            <ul>
                <li><a href="#">购物流程</a></li>
                <li><a href="#">会员介绍</a></li>
                <li><a href="#">生活旅行</a></li>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">大家电</a></li>
                <li><a href="#">联系客服</a></li>
            </ul>
          </div>
          <div class="mod_help_nav">
            <h5>购物指南</h5>
            <ul>
                <li><a href="#">购物流程</a></li>
                <li><a href="#">会员介绍</a></li>
                <li><a href="#">生活旅行</a></li>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">大家电</a></li>
                <li><a href="#">联系客服</a></li>
            </ul>
          </div>
          <div class="mod_help_nav">
            <h5>购物指南</h5>
            <ul>
                <li><a href="#">购物流程</a></li>
                <li><a href="#">会员介绍</a></li>
                <li><a href="#">生活旅行</a></li>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">大家电</a></li>
                <li><a href="#">联系客服</a></li>
            </ul>
          </div>
          <div class="mod_help_nav">
            <h5>购物指南</h5>
            <ul>
                <li><a href="#">购物流程</a></li>
                <li><a href="#">会员介绍</a></li>
                <li><a href="#">生活旅行</a></li>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">大家电</a></li>
                <li><a href="#">联系客服</a></li>
            </ul>
          </div>
          <div class="mod_help_nav">
            <h5>购物指南</h5>
            <ul>
                <li><a href="#">购物流程</a></li>
                <li><a href="#">会员介绍</a></li>
                <li><a href="#">生活旅行</a></li>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">大家电</a></li>
                <li><a href="#">联系客服</a></li>
            </ul>
          </div>
          <div class="mod_help_nav">
            <h5>帮助中心</h5>
            <img src="./images/qq.png" alt="图片加载失败">
          </div>
        </div>
        <!-----------footer下半部分结束------------->
        <!-----------footer友情链接部分开始------------->
        <div class="mod_copyright">
          <div class="links">
            <a href="#">关于我们</a><span class="mod_copyright_split">|</span>
            <a href="#">联系我们</a><span class="mod_copyright_split">|</span>
            <a href="#">联系客服</a><span class="mod_copyright_split">|</span>
            <a href="#">合作招商</a><span class="mod_copyright_split">|</span>
            <a href="#">商家帮助</a><span class="mod_copyright_split">|</span>
            <a href="#">营销中心</a><span class="mod_copyright_split">|</span>
            <a href="#">手机京东</a><span class="mod_copyright_split">|</span>
            <a href="#">友情链接</a><span class="mod_copyright_split">|</span>
            <a href="#">销售联盟</a><span class="mod_copyright_split">|</span>
            <a href="#">京东社区</a><span class="mod_copyright_split">|</span>
            <a href="#">风险监测</a><span class="mod_copyright_split">|</span>
            <a href="#">隐私政策</a><span class="mod_copyright_split">|</span>
            <a href="#">京东公益</a><span class="mod_copyright_split">|</span>
            <a href="#">English Site</a><span class="mod_copyright_split">|</span>
            <a href="#">Media & IR</a>
            </div>
          <div class="copyright">
            京公网安备 11000002000088号 | 京ICP备11041704号 | ICP | 互联网药品信息服务资格证编号
            (京)-经营性-2014-0008 | 新出发京零 字第大120007号<br>
            互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 网络文化经营许可证京网文
            [2020]6112-1201号 | 违法和不良信息举报电话：4006561155<br>
            Copyright © 2004 - 2022  京东JD.com 版权所有 | 消费者维权热线：4006067733 | 经营
            证照 | (京)网械平台备字(2018)第00003号 | 营业执照 | 增值电信业务经营许可证
          </div>        
        </div>
        <!-----------footer友情链接部分结束------------->
      </div>
    </footer>
    <!-----------footer部分结束------------->
  </body>
</html>
